<article>
  <p>因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。ZUI 支持最早的IE浏览器为IE8，但需要进行一些特殊配置。</p>
  <p>如果你准备支持的IE浏览器最低版本为IE9，则可以忽略此章节。但建议为早期用户准备一个提示。</p>
</article>

<section>
  <header><h3>禁用IE兼容模式</h3></header>
  <article>
    <p>为了保证IE能够使用最新渲染模式而不是兼容模式，在html文档头部应加入以下代码：</p>
    <pre>
<code>&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    ...
</code></pre>
  </article>
</section>

<section>
  <header><h3>提示IE7及更早的用户</h3></header>
  <article>
    <p>针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在<code>body</code>之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问<a href="http://browsehappy.com/">browsehappy.com</a>：</p>
    <pre><code>&lt;body&gt;
    &lt;!--[if lt IE 8]&gt;
        &lt;div class=&quot;alert alert-danger&quot;&gt;您正在使用 &lt;strong&gt;过时的&lt;/strong&gt; 浏览器. 是时候 &lt;a href=&quot;http://browsehappy.com/&quot;&gt;更换一个更好的浏览器&lt;/a&gt; 来提升用户体验.&lt;/div&gt;
    &lt;![endif]--&gt;
    ...
</code></pre>
    <p>如果你准备支持的IE浏览器最低版本为IE9，也建议为早期用户准备一个提示，只需要将以上代码中的 <code>[if lt IE 8]</code> 更改为 <code>[if lt IE 9]</code>。</p>
  </article>
</section>

<section>
  <header><h3>IE8用户</h3></header>
  <article>
    <p>在 <code>dist/lib/ieonly/</code> 中准备了一些 Polyfill 脚本来兼容IE8浏览器。</p>
    <p>因为IE8及早期版本不支持HTML5标签，所以针对IE8浏览器，我们引入html5shiv来使得HTML5标签在IE8中也能使用。在HTML文档的script区域加入以下代码：</p>
    <pre><code>&lt;!--[if lt IE 9]&gt;
  &lt;script src=&quot;dist/lib/ieonly/html5shiv.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</code></pre>
    <p>因为IE8及早期版本同样不支持media
    query来实现响应式布局，我们同样可以通过条件注释引入respond.js来帮助ie实现该功能。</p>
    <pre><code>&lt;!--[if lt IE 9]&gt;
  &lt;script src=&quot;dist/lib/ieonly/respond.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</code></pre>
    <p>因为IE8及早期版本不支持Canvas，如果你的产品用到ZUI中的 <a href="#view/chart">图表</a> 视图，则需要引入 <a href="https://code.google.com/p/explorercanvas/" target="_blank">ExplorerCanvas</a> 来支持绘图功能。</p>
    <pre><code>&lt;!--[if lt IE 9]&gt;
  &lt;script src=&quot;dist/lib/ieonly/excanvas.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</code></pre>
  </article>
</section>



